<%@page import="ecom.appcode.business.CategoryLogicImpl"%>
<%@page import="ecom.appcode.business.CategoryLogic"%>
<%@page import="ecom.appcode.common.daobean.CategoryDaoBean"%>
<%@page import="java.util.List"%>
<%@page import="ecom.appcode.common.daobean.ShoesDaoBean"%>
<%@page import="ecom.appcode.common.model.ShoesModel"%>
<%@page import="ecom.appcode.business.ShoesLogic"%>
<%@page import="ecom.appcode.business.ShoesLogicImpl"%>
<%@page import="ecom.appcode.common.constants.CommonConstants"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopy Mart - Responsive E-commerce Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<!-- General style -->
<link href="css/prettyPhoto.css" type="text/css" rel="stylesheet" media="screen">
<!-- prettyPhoto -->
<link href="css/tipsy.css" type="text/css" rel="stylesheet" media="screen">
<!--zoom-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Arvo:400,400italic,700,700italic'
  rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<!--mediaqueries-->
<script type="text/javascript" src="js/modernizr-1.7.min.js"></script>
<!--modernizr-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!-- prettyPhoto -->
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<!--tooltip-->
<script type="text/javascript" src="js/jquery-hover-effect.js"></script>
<!--Image Hover Effect-->
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<!--menu-->
<script type="text/javascript" src="js/jquery.dcmegamenu.1.3.3.js"></script>
<!--menu-->
<script type="text/javascript" src="js/jquery.quovolver.js"></script>
<!--blockquote-->
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--custom-->
<!--MENU-->
<script type="text/javascript">
	$(document).ready(function($) {
		$('#mega-menu-3').dcMegaMenu({
			rowItems : '2',
			speed : 'fast',
			effect : 'fade'
		});
	});
</script>
</head>
 <%
      ShoesModel shoesModel = new ShoesModel();
      String date = CommonConstants.DATE_NEW_ARRIVALS;
      int index = CommonConstants.NUM_8;
      ShoesLogic shoesLogic = new ShoesLogicImpl();
      // Load top 8 New Arrivals Items
      List<ShoesDaoBean> shoesList = shoesLogic.loadNewArrivalsItems(date, index);
      shoesModel.setShoesListBean(shoesList);
      
      // Load top 20 Sale Item
      List<ShoesDaoBean> SaleList = shoesLogic.loadTop20SaleShoes();
      
      CategoryDaoBean categoryBean = new CategoryDaoBean();
      CategoryLogic cateLogic = new CategoryLogicImpl();
      List<CategoryDaoBean> cateList = cateLogic.loadCategoryName();
      
      // Load Color on combobox
      List<ShoesDaoBean> colorList = shoesLogic.loadColor();
  %>

<body>
    <div id="page_wrap">
        <header>
            <div id="top">
                <c:set var="email" value="${sessionScope.EMAIL}"></c:set>
                <span>
                <c:if test="${not empty email}">
                    Hello! ${sessionScope.EMAIL}
                </c:if>
                <c:if test="${empty email}">
                     <a href="register.jsp">Click here to register</a> 
                </c:if>
                </span>
               
            </div><!--end:top-->
            
            
            <div id="top2">
                <ul class="myaccountmenu">
                    <li><a href="my-account.jsp" class="first">My Account</a></li>
                    <!--  
                    <li><a href="wishlist.html">My Wishlist</a></li>
                    -->
                    <li><a href="view-cart.jsp">My Cart</a></li>
<!--                     <li><a href="CartAction?btAction=CheckOut&txtEmail=${email}">Checkout</a></li> -->
                    <li class="login">
                      <a href="#login-box" class="last login-window">
                          
                          <c:if test="${not empty email}">
                            <a href="ShoesIndexAction?valueBtn=Logout&txtLogoutPage=index.jsp">Logout</a>
                          </c:if>
                          <c:if test="${empty email}">
                                Login
                          </c:if>
                       </a>
                    </li>
                </ul>
                <!-- Login Popup -->
                <div id="login-box" class="login-popup">
                <a href="#" class="close"><img src="images/process-stop.png" class="btn_close" title="Close Window" alt="Close" /></a>
                  <form action="ShoesIndexAction" method="post" class="signin" >
                        <fieldset class="textbox">
                        <label class="username">
                        <span>Email</span>
                        <input id="username" name="txtEmail" type="text" autocomplete="on" placeholder="Username">
                        </label>
                        <label class="password">
                        <span>Password</span>
                        <input id="password" name="txtPassword" type="password" placeholder="Password">
                        </label>
                         <button  class="submit button" name="valueBtn" onclick="changeValueLoginHiddenField()" value="Login">Login</button>
                        <input type="hidden" name="valueBtn" id="txtValueBtn" value="abc">
                        <p>
                        <a class="forgot" href="#">Forgot your password?</a> / <a class="register" href="register.html">Create an Account</a>
                        </p>        
                        <input type="hidden" name="txtPage" value="index.jsp"> 
                        </fieldset>
                  </form>
                </div>
                <!-- start Demo header -->    
                <div id="demo-header">
                    <c:set value="${sessionScope.SHOP}" var="shop"></c:set>
                    <c:if test="${not empty shop}">
                    
                    <c:set var="total" value="0"/>
                    <c:forEach var="row" items="${shop.totalList}" varStatus="counter">
                        <c:set var="numberItem" value="${counter.count}"></c:set>
                        <c:set var="total" value="${total +(row.unitPrice * row.quantity*1.00)}"/>
                    </c:forEach>
                    <a id="cart-link" href="#cart" title="Cart">${numberItem} Items - $${total}</a>
                    <div id="cart-panel">
                        <div class="item-cart">
                        <table>
                          <tbody>        
                          <c:forEach var="row" items="${shop.totalList}" varStatus="counter">
                            <tr>
                              <td class="image"><a href="product.html"><img width="60" height="60" src="${row.image}" alt="product" title="product"></a></td>
                              <td class="name"><a href="product.html">${row.shoesName}</a></td>
                              <td class="quantity">x&nbsp;${row.quantity}</td>
                              <td class="total">$${row.unitPrice * row.quantity}</td>
                              <c:set var="total" value="${total +(row.unitPrice * row.quantity*1.00)}"/>
                              <td class="remove"><i class="icon-remove "></i></td>
                            </tr>
                          </c:forEach>
                          </tbody>
                        </table>
                        <table>
                          <tbody>
                            <tr>
                              <td class="textright"><b>Total:</b></td>
                              <td class="textright">$${total/2}</td>
                            </tr>
                          </tbody>
                        </table>
                        <div class="buttoncart">
                          <a href="view-cart.jsp">View Cart</a>
                          <a href="CartAction?btAction=CheckOut&txtEmail=${email}">Checkout</a>
                        </div>
                    </div>
                    </c:if>
                    <c:if test="${empty shop}">
                    <c:set var="total" value="0"/>
                    <c:forEach var="row" items="${shop.totalList}" varStatus="counter">
                        <c:set var="numberItem" value="${counter.count}"></c:set>
                        <c:set var="total" value="${total +(row.unitPrice * row.quantity*1.00)}"/>
                    </c:forEach>
                    <a id="cart-link" href="#cart" title="Cart">${numberItem} Items - $${total}</a>
                    
                    <div id="cart-panel">
                        <div class="item-cart">
                        <center><font color="orange">Cart is empty</font></center>

                    </div>
                    </c:if>
                    </div><!-- /login-panel -->
                </div><!-- /demoheader -->  
            </div><!--end:top2-->
            
            
            <div id="top3">
                <h1 class="logo"><a href="index.jsp">Shopy Mart</a></h1>
                <form action="ShoesIndexAction" method="post" class="search_bar">
                    <fieldset>
                              <div class="controls">
                                <small>Color:</small>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <select id="select01" class="span3" name="txtSelectColor">
                                  <option>Select</option>
                                  <%
                                      for (int i = 0; i < colorList.size(); i++) {
                                              ShoesDaoBean colorBean = (ShoesDaoBean) colorList.get(i);                       
                                  %>
                                        <option><%= colorBean.getColor() %></option>
                                  <%
                                      }
                                  %> 
                                </select>
                              </div>
                      <input type="text" name="txtSearchShoesName" class="search" placeholder="Shoes Name"/>
                      <input type="submit" name="valueBtn" value="Search" class="submit" />
                    </fieldset>
                </form>
            </div><!--end:top3-->
        </header>
   <div id="container">
            <nav>  
                <ul id="mega-menu-3" class="mega-menu">
                    <li class="first"><a href="index.jsp" class="current">Home</a></li>
                    <li><a href="ShoesIndexAction?valueBtn=NewArrivals">New Arrivals</a>
                       <ul>
                          <%
                              for (int i = 0; i < cateList.size(); i++) {
                                      CategoryDaoBean cateBean = (CategoryDaoBean) cateList.get(i);                       
                          %>
                                <li><a href='ShoesIndexAction?valueBtn=loadCategory&txtCategoryID=<%= cateBean.getCategoryID() %>&txtCategoryName=<%= cateBean.getCategoryName()%>'><%= cateBean.getCategoryName() %></a> </li>
                          <%
                              }
                          %>   
                      </ul>
                    </li>
                <li><a href="shoes.html">Mens</a>
                       <ul>
                          <%
                              for (int i = 0; i < cateList.size(); i++) {
                                      CategoryDaoBean cateBean = (CategoryDaoBean) cateList.get(i);
                          %>
                                 <li><a href='ShoesIndexAction?valueBtn=loadCategoryBySex&txtCategoryID=<%= cateBean.getCategoryID() %>&txtCategoryName=<%= cateBean.getCategoryName()%>&txtSex=mens'><%= cateBean.getCategoryName() %></a> </li>
                          <%
                              }
                          %>   
                      </ul>
                </li>
                <li><a href="brands.html">Women</a>
                       <ul>
                          <%
                              for (int i = 0; i < cateList.size(); i++) {
                                      CategoryDaoBean cateBean = (CategoryDaoBean) cateList.get(i);
                          %>
                                 <li><a href='ShoesIndexAction?valueBtn=loadCategoryBySex&txtCategoryID=<%= cateBean.getCategoryID() %>&txtCategoryName=<%= cateBean.getCategoryName()%>&txtSex=womens'><%= cateBean.getCategoryName() %></a> </li>
                          <%
                              }
                          %>   
                      </ul>
                </li>
                <li><a href="ShoesIndexAction?valueBtn=ViewSaleItem">Sales Item</a></li>
                <li><a href="contact.jsp">Contact</a></li>
                </ul>
            </nav><!--end:grey-->
            <div class="content-wrap">
               
                <div id="intro">
                    <div class="one-fourth serv first">
                        <img src="images/service-1.png" alt="">
                        <h3><a href="#">Free Shipping</a></h3>
                        <span>Available</span>
                    </div>
                    <div class="one-fourth serv">
                        <img src="images/service-2.png" alt="">
                        <h3><a href="#">30 Days Return</a></h3>
                        <span>Easy Return</span>
                    </div>
                    <div class="one-fourth serv">
                        <img src="images/service-3.png" alt="">
                        <h3><a href="#">Call Us</a></h3>
                        <span>(63) 912 3456</span>
                    </div>
                    <div class="one-fourth serv">
                        <img src="images/service-4.png" alt="">
                        <h3><a href="#">Secured</a></h3>
                        <span>Checkout</span>
                    </div>
                </div>
        <div class="container-2">
          <div style="clear: both; display: block; height: 40px"></div>
          <h2>
            Shopping Cart &nbsp;<small>Your shopping cart</small>
          </h2>
          <c:set value="${sessionScope.SHOP}" var="shop"></c:set>     
          <c:if test="${not empty shop}">
        <form action="CartAction" method="get" >
          <input type="hidden" name="txtEmail" 
                 value="${sessionScope.EMAIL}">
          <table class="shopping-cart">
            <tr>
              <th class="action">Remove</th>
              <th class="image">Image</th>
              <th class="name">Product Name</th>
              <th class="model">Model</th>
              <th class="quantity">Quantity</th>
              <th class="price">Unit Price</th>
              <th class="total">Total</th>  
              <th class="action">Update</th>
            </tr>
            <c:set var="total" value="0" />
            <c:forEach var="row" items="${shop.totalList}" varStatus="counter">
            
              <tr>
              <form method="POST" action="CartAction">
                              <td class="remove-update">
                <a href="CartAction?btAction=Remove&txtShoesID=${row.shoesID}" class="tip remove" title="Remove"><img  src="images/remove.png" alt=""></a> 
<%--                 <a href="CartAction?btAction=UpdateCart&txtShoesID=${row.shoesID}" class="tip update" title="Update" onclick="changeValueQuantityField()"><img src="images/update.png" alt=""></a> --%>
<!--                <input type="submit" value="Remove" name="btAction"> -->
               
                </td>
                <td class="image"><a href="#"><img title="product" alt="product"
                    src="${row.image}" height="50" width="50"></a></td>
                <td class="name"><a href="#">${row.shoesName}</a></td>
                <td class="model">${row.brand}</td>
                <input name="txtShoesID" value="${row.shoesID}" type="hidden">
                <c:set var="quantity" value="${row.quantity}"></c:set>
                <td class="quantity">
                    <input type="text" size="1" value="${quantity}" name="txtQuantity" class="span1" id="quantity">
                </td>
                <td class="price">${row.unitPrice}</td>
                <td class="total">${row.unitPrice * row.quantity}</td>
                <c:set var="total" value="${total +(row.unitPrice * row.quantity*1.00)}"/>

                <td class="remove-update">
                 <input type="submit" value="Update" name="btAction">
                 </td>
             </form>
              </tr>

            </c:forEach>
          </table>
          <div class="contentbox">
<!--             <div class="cartoptionbox one-half first"> -->
<!--               <h4>Choose if you have a discount code or reward points you want to use or would like to estimate -->
<!--                 your delivery cost.</h4> -->
<!--               <input type="radio" class="radio"> <span>Use Coupon Code</span> <br> <input type="radio" -->
<!--                 class="radio"> <span>Use Gift Voucher</span> <br> <input type="radio" class="radio" -->
<!--                 checked="checked"> <span>Estimate Shipping &amp; Taxes</span> <br> <br> -->
<!--               <form action="#" class="ship"> -->
<!--                 <h4>Enter your destination to get a shipping estimate.</h4> -->
<!--                 <fieldset> -->
<!--                   <div class="control-group"> -->
<!--                     <label>Select list</label> <select class="span3 cartcountry"> -->
<!--                       <option>Country:</option> -->
<!--                       <option>Philippines</option> -->
<!--                       <option>United States</option> -->
<!--                     </select> <select class="span3 cartstate"> -->
<!--                       <option>Region / State:</option> -->
<!--                       <option>Manila</option> -->
<!--                       <option>Los Angeles</option> -->
<!--                     </select> <input type="submit" value="Submit" class="submit"> -->
<!--                   </div> -->
<!--                 </fieldset> -->
<!--               </form> -->
<!--             </div> -->
            <!--cartoptionbox-->
            <div class="alltotal one-half">
              <table class="alltotal">
<!--                 <tr> -->
<!--                   <td><span class="extra">Sub-Total :</span></td> -->
<%--                   <td><span>${total}</span></td> --%>
<!--                 </tr> -->
<!--                 <tr> -->
<!--                   <td><span class="extra">Eco Tax (-2.00) :</span></td> -->
<!--                   <td><span>$11.0</span></td> -->
<!--                 </tr> -->
<!--                 <tr> -->
<!--                   <td><span class="extra">VAT (18.2%) :</span></td> -->
<!--                   <td><span>$21.0</span></td> -->
<!--                 </tr> -->
                <tr>
                  <td><span class="extra grandtotal">Total :</span></td>
                  <td><span class="grandtotal">$${total}</span></td>
                  
                </tr>
              </table>
              <input type="submit" value="Continue Shopping" name="btAction"> 
              <input type="submit" value="CheckOut" name="btAction">
              </form>
          </c:if>
          <c:if test="${empty shop}">
            <div class="alert yellow_alert">
                 <p>Cart is empty</p>
            </div>
          </c:if>

            </div>
            <!--end:alltotal-->
          </div>
          <!--end:contentbox-->
          <div style="clear: both; display: block; height: 40px"></div>
        </div>
        <!--end:container-2-->
        <div class="container-2">
          <div style="clear: both; display: block; height: 40px"></div>
          <div class="ship">
            <a href="#"><img src="images/service-1.png" alt=""></a>
            <h4>
              <a href="#">Free Shipping</a>
            </h4>
            <span>On order over $300</span>
          </div>
          <div class="subs">
            <h4>Sign up for our Newsletter</h4>
            <form action="#" method="post" class="subscribes">
              <fieldset>
                <input type="text" name="subscribe" class="subscribe" value="Subscribe"
                  onBlur="if (this.value == ''){this.value = 'Subscribe'; }"
                  onFocus="if (this.value== 'Subscribe') {this.value = ''; }" /> <input type="submit" name="submit"
                  value="Submit" class="submit" />
              </fieldset>
            </form>
          </div>
        </div>
        <!--end:container-2-->
      </div>
      <!--end:content-wrap-->
      <footer>
        <div class="content-wrap">
          <div class="one-fourth first">
            <h4>Information</h4>
            <ul>
              <li><a href="http://html5awesome.com/themeforest/shopymart/about.html">About Us</a></li>
              <li><a href="#">Delivery Information</a></li>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Terms &amp; Condition</a></li>
            </ul>
          </div>
          <div class="one-fourth">
            <h4>Customer Services</h4>
            <ul>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="#">Shipping Returns</a></li>
              <li><a href="#">Secure Shopping</a></li>
            </ul>
          </div>
          <div class="one-fourth">
            <h4>Extras</h4>
            <ul>
              <li><a href="brands.html">Brands</a></li>
              <li><a href="#">Gift Vouchers</a></li>
              <li><a href="#">Affiliates</a></li>
              <li><a href="#">Special</a></li>
            </ul>
          </div>
          <div class="one-fourth">
            <h4>My Account</h4>
            <ul>
              <li><a href="account.html">My Account</a></li>
              <li><a href="#">Order History</a></li>
              <li><a href="wishlist.html">Wishlist</a></li>
              <li><a href="#">Newsletter</a></li>
            </ul>
          </div>
        </div>
        <div class="content-wrap">
          <div style="clear: both; display: block;" class="social-wrap"></div>
          <ul class="social">
            <li><a href="#" class="tip" title="Facebook"><img src="images/social-icon-facebook.png"
                alt="Facebook"></a></li>
            <li><a href="#" class="tip" title="Dribbble"><img src="images/social-icon-dribbble.png"
                alt="Dribbble"></a></li>
            <li><a href="#" class="tip" title="Flickr"><img src="images/social-icon-flickr.png" alt="Flickr"></a></li>
            <li><a href="#" class="tip" title="Pinterest"><img src="images/social-icon-pinterest.png"
                alt="Pinterest"></a></li>
            <li><a href="#" class="tip" title="Twitter"><img src="images/social-icon-twitter.png" alt="Twitter"></a></li>
            <li><a href="#" class="tip" title="RSS"><img src="images/social-icon-rss.png" alt="RSS"></a></li>
          </ul>
          <ul class="payment">
            <li><a href="#" class="tip" title="Paypal"><img src="images/payment-icon-paypal.png" alt="Paypal"></a></li>
            <li><a href="#" class="tip" title="American Express"><img src="images/payment-icon-ae.png"
                alt="American Express"></a></li>
            <li><a href="#" class="tip" title="Discover"><img src="images/payment-icon-discover.png"
                alt="Discover"></a></li>
            <li><a href="#" class="tip" title="Master Card"><img src="images/payment-icon-mastercard.png"
                alt="Master Card"></a></li>
            <li><a href="#" class="tip" title="Visa"><img src="images/payment-icon-visa.png" alt="Visa"></a></li>
          </ul>
          <p style="clear: both; display: block;">
            &copy; 2013 <a href="index-2.html">Shopymart</a>, All Rights Reserved. Designed by: <a href="#">louiejiemahusay</a>
          </p>
        </div>
      </footer>
    </div>
    <!--end:container-->
  </div>
  <!--end:page_wrap-->
</body>
</html>
